<template>
  <list-detail-layout :col-props="{ md: [7, 17] }" :right-bg-color="'#fff'" class="editCarModelLayout">
    <template #detailMain>
      <div class="editVehicleLeftBox h100">
        <div style="padding: 0px 10px 0px 10px; margin-left: 30px;" v-if="!vehicleId">
          <a-form-model-item :label="$t('品牌')">
            <a-select
              v-model="company"
              @change="onSearch"
              optionFilterProp="children"
              :filterOption="$commonFun.filterOption"
              showSearch
              placeholder="品牌"
              allow-clear
              style="width:100%"
            >
              <a-select-option
                v-for="item in allCompany"
                :key="item.id"
                :value="item.value"
                :title="item.name"
              >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="$t('款型/子车型代码')">
            <a-input-search
              v-model="carModelKey"
              placeholder="输入车型/子车型/配置车型代码"
              style="width: 100%"
              allowClear
              size="small"
              @change="onSearch"
              @search="search"
            />
          </a-form-model-item>
        </div>
        <full-parent-dom-with-dask style="margin-left: 10px;" :loading="loadingModelsData"></full-parent-dom-with-dask>
        <ul class="carModelBox" style="height: calc(100% - 100px); padding-left: 30px;" >
          <li
            class="carModelItem"
            :class="{ active: formData.modelStyleId === model.id }"
            v-for="model in models"
            :key="model.id"
            @click="toggleModel(model.model.id, model.id)"
          >
            <p class="carModelTitle">
              <i class="iconfont icon-chexing1"></i>
              <span>车型代码：{{ model.model.code }}</span>
            </p>
            <p class="carModelDesc">
              <span v-if="model.code">子车型代码：{{ model.code || '-' }} |</span>
              <span class="divider" v-if="model.configModelCode">配置车型代码：{{ model.configModelCode || '-' }} |</span>
              <span v-if="model.name">款型名：{{ model.name || '-' }} | </span>
              <span v-if="model.name">公告车型：{{ model.publishCode || '-' }} |</span>
              <span v-if="model.model&&model.model.company">品牌：{{ $store.getters.getDictCodeObj('companyDictCode')[model.model.company] || '-' }}</span>
            </p>
          </li>
          <li class="carModelItem" v-if="loadingModelsData === false && models.length === 0">{{ $t('noData') }}</li>
        </ul>
      </div>
    </template>
    <template #detailRight>
      <!-- 填写车辆基本信息、显示车型信息、车型零件区域 -->
      <div class="editVehicleRightBox h100" :style="{'opacity' : loadingVehicleFormData ? 0.3 : 1}">
        <!-- 显示车型信息start -->
        <div class="showCarModelInfo">
          <h4 class="withVerticleLineT4 title14">
            款型信息
            <span class="warning" v-if="!formData.modelId && loadingCarModelInfoData === false">
              ({{ $t('pleaseSelect') + $t('trimLevel').toLowerCase() }})
            </span>
            <!-- 展开与折叠 -->
            <span
              class="arrow"
              @click="toggleShow('modelInfo')"
            >{{ $t(showConfig.modelInfo ? 'packup' : 'packdown') }}
              <a-icon type="right" :class="{ down: showConfig.modelInfo }" />
            </span>
          </h4>
          <div class="descItems" v-show="showConfig.modelInfo">
            <full-parent-dom-with-dask :loading="loadingCarModelInfoData"></full-parent-dom-with-dask>
            <div class="descItemOneBox">
              <div class="descItem">
                <span class="descTitle">车型名称</span>
                <span class="descValue" v-if="activeCarModelInfo.model && activeCarModelInfo.model.name">
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="activeCarModelInfo.model.name"
                  ></table-ellipsis>
                </span>
                <span class="descValue" v-else>
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="'-'"
                  ></table-ellipsis>
                </span>
              </div>
              <div class="descItem">
                <span class="descTitle">{{ $t('brandName') }}</span>
                <span class="descValue" v-if="activeCarModelInfo.model && activeCarModelInfo.model.brandName">
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="activeCarModelInfo.model.brandName"
                  ></table-ellipsis>
                </span>
                <span class="descValue" v-else>
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="'-'"
                  ></table-ellipsis>
                </span>
              </div>
              <div class="descItem">
                <span class="descTitle">公告型号</span>
                <span class="descValue">
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="activeCarModelInfo.publishCode || '-'"
                  ></table-ellipsis>
                </span>
              </div>
            </div>
            <div class="descItemTwoBox">
              <div class="descItem">
                <span class="descTitle">{{ $t('modelCode') }}</span>
                <span class="descValue" v-if="activeCarModelInfo.model&&activeCarModelInfo.model.code">
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="activeCarModelInfo.model.code"
                  ></table-ellipsis>
                </span>
                <span class="descValue" v-else>
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="'-'"
                  ></table-ellipsis>
                </span>
              </div>
              <div class="descItem">
                <span class="descTitle">{{ $t('stereotype') }}</span>
                <span class="descValue">
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="activeCarModelInfo.name || '-'"
                  ></table-ellipsis>
                </span>
              </div>

               <div class="descItem">
                  <span class="descTitle">生产车系</span>
                  <span class="descValue">
                    <table-ellipsis
                      :tableEllipsisIsTurnLine="false"
                      :text="activeCarModelInfo.productionSeries || '-'"
                    ></table-ellipsis>
                  </span>
                </div>
            </div>
            <div class="descItemThreeBox">
              <div class="descItem">
                <span class="descTitle">品牌</span>
                <span class="descValue" v-if="activeCarModelInfo.model&&activeCarModelInfo.model.company">
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="$store.getters.getDictCodeObj('companyDictCode')[activeCarModelInfo.model.company] || activeCarModelInfo.model.company"
                  ></table-ellipsis>
                </span>
                <span class="descValue" v-else>
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="'-'"
                  ></table-ellipsis>
                </span>
              </div>
              <div class="descItem" >
                <span class="descTitle">销售区域</span>
                <span class="descValue" v-if="activeCarModelInfo.model&&activeCarModelInfo.model.saleArea">
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="$store.getters.getDictCodeObj('saleAreaDictCode')[activeCarModelInfo.model.saleArea] || activeCarModelInfo.model.saleArea"
                  ></table-ellipsis>
                </span>
                <span class="descValue" v-else>
                  <table-ellipsis
                    :tableEllipsisIsTurnLine="false"
                    :text="'-'"
                  ></table-ellipsis>
                </span>
              </div>
               <div class="descItem">
                  <span class="descTitle">生产车型</span>
                  <span class="descValue">
                    <table-ellipsis
                      :tableEllipsisIsTurnLine="false"
                      :text="activeCarModelInfo.productionModel || '-'"
                    ></table-ellipsis>
                  </span>
                </div>
            </div>
          </div>
        </div>
        <!-- 显示车型信息end -->
        <!-- 显示车型零件信息start -->
        <div class="showCarPartInfo">
          <h4 class="withVerticleLineT4 title14">
            款型ECU
            <span class="warning" v-if="!formData.modelId && loadingCarModelPartLists === false">
              ({{ $t('pleaseSelect') + $t('trimLevel').toLowerCase() }})
            </span>
            <span
              class="arrow"
              @click="toggleShow('modelParts')"
            >{{ $t(showConfig.modelParts ? 'packup' : 'packdown') }}
              <a-icon type="right" :class="{ down: showConfig.modelParts }" />
            </span>
          </h4>
          <div class="commonTableSty" v-show="showConfig.modelParts">
            <a-table
              :columns="columns"
              :data-source="activeCarPartTbData"
              :loading="loadingCarModelPartLists"
              :pagination="false"
              :scroll="{ x: 800, y: 200 }"
              ref="table"
            >
              <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
                <table-ellipsis :text="text || '-'" :key="column.dataIndex"></table-ellipsis>
              </template>
            </a-table>
          </div>
        </div>
        <!-- 基本信息start -->
        <h4 class="withVerticleLineT4 title14">
          {{ $t('basicInformation') }}
        </h4>
        <a-form-model
          ref="formComp"
          :model="formData"
          :rules="rules"
          layout="horizontal"
          class="AsteriskAfter newEditStyle editVehicleBaseInfo"
        >
          <full-parent-dom-with-dask :loading="loadingVehicleFormData"></full-parent-dom-with-dask>
          <a-row :gutter="20">
            <a-col :md="12" :sm="24">
              <a-form-model-item label="VIN" prop="vin">
                <a-input
                  :maxLength="17"
                  v-model="formData.vin"
                  :disabled="Boolean(formData.id)"
                  placeholder="VIN"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('vehicleType')" prop="vehicleType">
                <vehicle-type-select
                  :default-value="formData.vehicleType"
                  @changeoption="changeOption($event, 'vehicleType')"
                  :disabled="Boolean(formData.id)"
                  :testVehicle="true"
                ></vehicle-type-select>
              </a-form-model-item>
            </a-col>
          </a-row>
<!--          </a-row>-->
<!--          <a-row :gutter="20">-->
          <a-row :gutter="20">
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('productionPlant')" prop="manufacturer">
                <a-select
                  v-model="formData.manufacturer"
                  optionFilterProp="children"
                  :filterOption="$commonFun.filterOption"
                  showSearch
                  :placeholder="$t('productionPlant')"
                  allow-clear
                  style="width:100%"
                >
                  <a-select-option
                    v-for="(item, index) in Manufacturer"
                    :key="'producePhase'+index"
                    :value="item.value"
                    :title="item.name"
                  >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('生产批次')" prop="produceBatch">
                <a-input
                  v-model="formData.produceBatch"
                  placeholder="生产批次"
                  :maxLength="20"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('productionYear')" prop="productionTime">
                <a-date-picker
                  :disabled-date="disabledDate"
                  @change="onChangeDate"
                  :value="formData.productionTime"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('vehiclePhase')" prop="producePhase">
                <a-select
                  v-model="formData.producePhase"
                  optionFilterProp="children"
                  :filterOption="$commonFun.filterOption"
                  showSearch
                  allow-clear
                  style="width:100%"
                  :placeholder="$t('vehiclePhase')"
                >
                  <a-select-option
                    v-for="(item, index) in ProducePhase"
                    :key="'producePhase'+index"
                    :value="item.value"
                    :title="item.name"
                  >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('province')" prop="province">
                <province-select :default-value="formData.province" @changeoption="changeOption($event, 'province')">
                </province-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="车身颜色" prop="color">
                <a-input
                  :maxLength="20"
                  v-model="formData.color"
                  placeholder="车身颜色"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="座位数" prop="seats">
                <a-input
                  :maxLength="1"
                  v-model="formData.seats"
                  placeholder="座位数"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="内饰颜色" prop="interiorColor">
                <a-input
                  :maxLength="20"
                  v-model="formData.interiorColor"
                  placeholder="内饰颜色"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="库位" prop="location">
                <a-select
                  v-model="formData.location"
                  optionFilterProp="children"
                  showSearch
                  allow-clear
                  style="width:100%"
                  placeholder="库位">
                  <a-select-option
                    :key="0"
                    :value="0"
                    @click="changelocationoption(0)"
                  >
                    {{ $store.getters.getDictCodeObj('binlocationDictCode')[0] }}
                  </a-select-option>
                  <a-select-option
                    :key="1"
                    :value="1"
                    @click="changelocationoption(1)"
                  >
                    {{ $store.getters.getDictCodeObj('binlocationDictCode')[1] }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="入库时间" prop="insertTime">
                <a-date-picker
                  @change="onChangeInsertDate"
                  :disabled-date="disabledDate"
                  v-model="formData.insertTime"
                  style="width: 100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="上线时间" prop="onLineTime">
                <a-date-picker
                  @change="onChangeOnLineDate"
                  :disabled-date="disabledDate"
                  v-model="formData.onLineTime"
                  style="width: 100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="下线时间" prop="offLineTime">
                <a-date-picker
                  @change="onChangeOffLineDate"
                  :disabled-date="disabledDate"
                  v-model="formData.offLineTime"
                  style="width: 100%"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!-- 基本信息end -->
          <h4 class="withVerticleLineT4 title14">
            {{ $t('DiLink信息') }}
          </h4>
<!--          </a-row>-->
          <a-row :gutter="20">
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('dilinkPlatform')" prop="mainframePlatform">
<!--                <a-input v-model="formData.mainframePlatform" />-->
                <a-select
                  v-model="formData.mainframePlatform"
                  optionFilterProp="children"
                  :filterOption="$commonFun.filterOption"
                  showSearch
                  allow-clear
                  style="width:100%"
                >
                  <a-select-option
                    v-for="(item, index) in DiLinkVersion"
                    :key="'DiLinkVersion'+index"
                    :value="item.name"
                    :title="item.name"
                  >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('主机零件号')" prop="mainframePartCode">
                <a-input
                  :maxLength="20"
                  v-model="formData.mainframePartCode"
                  placeholder="主机零件号"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :label="$t('主机SN')" prop="mainframeSn">
                <a-input :maxLength="30" v-model="formData.mainframeSn" placeholder="主机SN"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <template v-if="vehicleId">
            <!--证书信息-->
            <h4 class="withVerticleLineT4 title14">
              {{ $t('certInfo') }}
            </h4>
            <a-row :gutter="20">
              <!-- RSA证书SN号 -->
              <a-col :md="12" :sm="24">
                <a-form-model-item :label="$t('rsasn')" prop="rsaSn">
                  {{formData.hasRsaSn === true ? $t('已灌装') : $t('未灌装')}}
                </a-form-model-item>
              </a-col>
              <!-- DiLink证书SN号 -->
              <a-col :md="24" :sm="24">
                <a-form-model-item :label="$t('ecczs')">
                  {{formData.hasEccCertificate === true ? $t('已灌装') : $t('未灌装')}}
                </a-form-model-item>
              </a-col>
            </a-row>
          </template>
        </a-form-model>
        <!-- 基本信息end -->
      </div>
    </template>
  </list-detail-layout>
</template>
<script>
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import RoleSelect from '@/views/components/RoleSelect'
import VehicleTypeSelect from '@/views/components/VehicleTypeSelect'
import VehicleModelSelect from '@/views/components/VehicleModelSelect'
import ProvinceSelect from '@/views/components/ProvinceSelect'
import ListDetailLayout from '@/views/components/ListDetailLayout.vue'
import { mapState } from 'vuex'
import { vehicleFormInitData } from '../config/form'
import { ecuTbColumns } from '../config/list'
import ecuApi from '@/api/modules/system/ecuMana'
import vehicleApi from '@/api/modules/system/vehicleMana'
import moment from 'moment'
import lodash from 'lodash'
import { STable } from '@/components'
import { checkTextLen } from '@/utils/validate'
import CustomTextArea from '@/components/CustomTextArea/index.vue'
import AuthButton from '@/components/AuthButton'
import flowDesignApi from '@/api/modules/flowManage/flowDesign'

export default {
  name: 'NewEditModel',
  components: {
    RoleSelect,
    VehicleTypeSelect,
    VehicleModelSelect,
    ProvinceSelect,
    ListDetailLayout,
    FullParentDomWithDask,
    TableEllipsis,
    STable,
    CustomTextArea,
    AuthButton
  },
  props: {
    nowTime: {
      type: Number,
      default: 1
    },
    copyId: {
      type: String,
      default: ''
    },
    vehicleId: {
      type: String,
      default: ''
    },
    initVehicleType: {
      type: Number,
      default: undefined
    },
    sign: {
      type: String,
      default: ''
    },
    getTaskFlowDesinNodeDataNewly: {
      type: Function,
      default: null
    },
    test: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      ProducePhase: (state) => state.dict.producePhaseDictCode,
      DiLinkVersion: (state) => state.dict.diLinkVersionDictCode,
      Manufacturer: (state) => state.dict.manufacturerDictCode,
      roles: (state) => state.role.roleData,
      allCompany: (state) => state.dict.companyDictCode

    }),
    commonColumns () {
      return this.columns.filter((item) => !item.special)
    },
    getNodeInfo () {
      if (!!this.vehicleId && this.sign === 'stop') {
        return 'getTestCarFlowDesinNodeDataStop'
      }
      if (!!this.vehicleId && this.sign === 'recovery') {
        return 'getTestCarFlowDesinNodeDataResume'
      }
      if (!!this.vehicleId && this.sign === 'delete') {
        return 'getTestCarFlowDesinNodeDataDelete'
      }
      return 'getTestCarFlowDesinNodeData'
    }
  },
  data () {
    const _this = this
    return {
      formData: {...lodash.clone(vehicleFormInitData),vehicleType: _this.initVehicleType},
      rules: {
        vin: [
          { required: true, message: this.$t('pleaseInput') },
          {
            validator: function (rule, text, callback) {
              if (!/^[a-z\d]{17}$/i.test(text)) {
                callback(new Error(_this.$t('vinInputTip')))
                return
              }
              callback()
            }
          }
        ],
        iccId: [
          { required: false, message: this.$t('pleaseInput') },
          {
            validator: function (rule, text, callback) {
              if (text &&  !/^[a-z\d]{20}$/i.test(text)) {
                callback(new Error('请输入正确的ICCID(20位大小写字母、数字组成)'))
                return
              }
              callback()
            }
          }
        ],
        vehicleType: [{ required: true, message: this.$t('pleaseSelect') }],
        rsaSn: [{ validator: checkTextLen(100) }],
        eccCertificate: [{ validator: checkTextLen(2000) }],
        mainframeSn: [{ validator: checkTextLen(30) }],
        mainframePartCode: [{ validator: checkTextLen(20) }],
        mainframePlatform: [{ validator: checkTextLen(20) }],
        manufacturer: [
          {
            validator: (rule, value, callback) => {
              this.$commonFun.commonValidator(rule, value, callback, 50)
            }
          }
        ],
        seats: [
          {
            required: false,
            pattern: new RegExp(/^[1-9]\d*$/, 'g'),
            message: '请输入整数',
            trigger: 'change'
          }
        ]
      },
      time: 1100,
      columns: ecuTbColumns,
      treeData: [],
      loadingModelsData: false,
      loadingCarModelInfoData: false,
      activeCarModelInfo: {},
      loadingCarModelPartLists: false,
      activeCarPartTbData: [],
      loadingVehicleFormData: false,
      models: [{ id: 111, name: 'def' }],
      showConfig: {
        modelInfo: true,
        modelParts: true
      },
      carModelKey: '',
      company: undefined,
      checkRule: false,
      loadingProcess: false,
      candidates: [],
      Process: '',
      // 生产车系,未知车型判断用
      productionSeries: '',
      manualSetCert: 1,
      iccId: ''
    }
  },
  watch: {
    nowTime: {
      handler () {
        // this.init();
      },
      immediate: true
    },
    'formData.modelStyleId': {
      handler (val) {
        if (val) {
          this.getActiveCarModelInfoData()
          this.getActiveCarModelTbData()
        } else {
          !this.formData.id && this.resetFields()
        }
      },
      immediate: true
    }
  },

  created () {
    this.init(true);
    this.$store.dispatch('getProducePhaseDictCodeData');
    this.$store.dispatch('getManufacturerDictCodeData');
    this.$store.dispatch('getDiLinkVersionDictCodeData');
    this.$store.dispatch('getBinlocationDictCodeData');
    this.$store.dispatch('getSaleAreaDictCodeData');
    this.$store.dispatch('getCompanyDictCodeData');
  },
  methods: {
    init (reset = false) {
      this.carModelKey = ''
      this.company = undefined
      this.getModelsData()
      if (reset) {
        this.getVehicleFormData()
      }
    },
    disabledDate (current) {
      return current > moment()
    },
    onChangeDate (val, dateString) {
      this.formData.productionTime = dateString
    },
    onChangeInsertDate (val, dateString) {
      this.formData.insertTime = dateString
    },
    onChangeOnLineDate (val, dateString) {
      this.formData.onLineTime = dateString
    },
    onChangeOffLineDate (val, dateString) {
      this.formData.offLineTime = dateString
    },
    changeOption (val, key) {
      const vm = this
      vm.$set(vm.formData, key, val)
      vm.$refs.formComp.validateField(key)
    },
    resetFields () {
      this.activeCarPartTbData = []
      this.activeCarModelInfo = {}
      this.formData = {...lodash.clone(vehicleFormInitData),vehicleType: this.initVehicleType}
      this.$refs.formComp && this.$refs.formComp.clearValidate()
    },
    getFormData () {
      return new Promise((resolve, reject) => {
        const data = this.formData

        if (!this.otherCheck()) {
          return
        }

        this.$refs.formComp.validate((valid) => {
          if (!valid) {
            reject(valid)
            return
          }
          resolve(data)
        })
      })
    },
    otherCheck () {
      const msg = this.$t('pleaseInput')
      if (!this.formData.modelId) {
        this.$message.error(msg + this.$t('vehicleModel'))
        return false
      }
      return true
    },
    // 获取车型数据
    getModelsData () {
      this.models = []
      // this.formData.modelId = ''
      this.loadingModelsData = true
      this.$api
        .getModelStyleList({ keyword: this.carModelKey, pageNo: 1, pageSize: 100, filterUnknownModel: true, company: this.company })
        .then((res) => {
          this.models = res.data
        })
        .finally(() => {
          this.loadingModelsData = false
        })
    },
    toggleModel (modelId, ID) {
      // this.loadingCarModelInfoData = true
      // if (modelId === this.formData.modelId) {
      //   return
      // }
      if (this.formData.modelCode === 'UNKNOWN' && this.productionSeries === undefined) {
        this.formData.modelId = modelId
        this.formData.modelStyleId = ID
      } else if (!this.vehicleId) {
        this.formData.modelId = modelId
        this.formData.modelStyleId = ID
      } else {
        this.$message.error(this.$t('编辑车辆时不能修改款型'))
      }
    },
    // 获取当前车型信息
    getActiveCarModelInfoData () {
      this.activeCarModelInfo = {}
      this.loadingCarModelInfoData = true
      this.$api
        .getModelStyleDetail(this.formData.modelStyleId)
        .then((res) => {
          this.activeCarModelInfo = res.data
          console.log(this.activeCarModelInfo, 'this.activeCarModelInfo')
          this.loadingCarModelInfoData = false
          this.formData.productionSeries = this.activeCarModelInfo.productionSeries
          this.formData.productionModel = this.activeCarModelInfo.productionModel
        })
        .finally(() => {
          this.loadingCarModelInfoData = false
        })
    },
    // 获取当前车型零件列表
    getActiveCarModelTbData () {
      this.activeCarPartTbData = []
      this.loadingCarModelPartLists = true
      ecuApi
        .getEcuList({ modelId: this.formData.modelId, pageSize: 9999 })
        .then((res) => {
          this.activeCarPartTbData = res.data
        })
        .finally(() => {
          this.loadingCarModelPartLists = false
        })
    },
    // 获取当前车辆表单编辑的信息
    getVehicleFormData () {
      this.resetFields()
      if (!this.vehicleId && !this.copyId) {
        this.formData.vehicleType = this.initVehicleType;
        return
      }
      this.loadingVehicleFormData = true
      this.formData.id = this.vehicleId
      vehicleApi
        .getVehicleInfo({ id: this.vehicleId || this.copyId })
        .then((res) => {
          //boolean to int
          for (var key in res) {
            if (typeof res[key] === 'boolean') {
              res[key] = +res[key];
            }
          }
          const info = res.data
          // this.formData = {...res.data};
          // this.formData.id = this.vehicleId;
          this.formData.vin = info.vin
          this.formData.vehicleType = info.vehicleType
          this.formData.province = info.province
          this.formData.manufacturer = info.manufacturer
          this.formData.modelId = info.modelId
          this.formData.produceBatch = info.produceBatch
          this.formData.producePhase = info.producePhase
          this.formData.mainframePlatform = info.mainframePlatform
          this.formData.mainframePartCode = info.mainframePartCode
          this.formData.mainframeSn = info.mainframeSn
          this.formData.productionTime = info.productionTime ? moment(info.productionTime).format('YYYY-MM-DD') : null
          this.formData.hasEccCertificate = info.hasEccCertificate
          this.formData.hasRsaSn = info.hasRsaSn
          this.formData.iccId = info.iccId
          this.iccId = info.iccId
          this.formData.color = info.color
          this.formData.interiorColor = info.interiorColor
          this.formData.seats = info.seats
          this.formData.location = info.location
          this.formData.insertTime = info.insertTime ? moment(info.insertTime).format('YYYY-MM-DD') : null
          this.formData.onLineTime = info.onLineTime ? moment(info.onLineTime).format('YYYY-MM-DD') : null
          this.formData.offLineTime = info.offLineTime ? moment(info.offLineTime).format('YYYY-MM-DD') : null
          this.formData.modelStyleId = info.modelStyleId
          this.formData.productionSeries = info.productionSeries
          this.formData.productionModel = info.productionModel
          this.formData.modelCode = info.modelCode
          this.productionSeries = info.productionSeries
        })
        .finally(() => {
          this.loadingVehicleFormData = false
        })
    },
    toggleShow (key) {
      this.showConfig[key] = !this.showConfig[key]
    },
    onSearch: lodash.debounce(function () {
      this.search()
    }, 300),
    search () {
      this.getModelsData()
    },
    changelocationoption (val) {
      this.formData.location = val
    }
  }
}
</script>
<style lang="less" scoped>
.editVehicleLeftBox {
  // overflow: auto;
  // position: relative;

  .arrowRightDown {
    transition: all 0.3s;
  }

  .icon-xiangmuguanli {
    margin: 0 5px;
  }

  .carModelBox {
     overflow: auto;
    position: relative;
    .carModelItem {
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      color: #000000a6;

      &:hover {
        background-color: @blockHoverBgColor;
        color: @blockHoverTextColor;
      }

      &.active {
        color: @blockHoverTextColor;
      }

      .icon-chexing1 {
        margin-right: 5px;
      }

      .carModelDesc {
        font-size: 0.8em;
        margin-top: 5px;
      }

      .divider {
        margin: 0 5px;
      }
    }
  }
  ::v-deep .ant-form-item-label {
    padding-bottom: 0px;
    height: 28px;
  }
  ::v-deep .ant-form-item {
    margin-bottom: 0;
  }
}

.editVehicleRightBox {
  .title14 {
    margin-bottom: 15px;
    position: relative;

    .arrow {
      position: absolute;
      right: 0;
      top: 3px;
      color: @primary-color;
      font-size: 0.9em;
      cursor: pointer;
      font-weight: 500;

      .anticon {
        padding-left: 3px;
        transition: all 0.3s;

        &.down {
          transform: rotate(90deg);
        }
      }
    }
  }

  .warning {
    color: #f5222d;
  }

  .editVehicleBaseInfo {
    position: relative;
  }

  .showCarModelInfo {
    position: relative;
    padding-bottom: 15px;
  }

  .descItems {
    display: flex;

    .descItemOneBox {
      flex: 36% 0 0;
    }

    .descItemTwoBox {
      flex: 38% 0 0;
    }

    .descItemThreeBox {
      flex: 22% 0 0;
    }

    .descItem {
      padding: 5px 0;
      font-size: 0.9em;
      display: flex;
    }

    .descTitle {
      font-weight: bold;
      flex: 100px 0 0;
    }

    .descValue {
      flex: 1 0 0;
      font-size: 1em;
    }
  }

  .showCarPartInfo {
    border-top: 1px solid @borderColor;
    padding: 15px 0;
  }
}
</style>
<style lang="less">
.editCarModelLayout {
  .drawerListDetailLeft {
    padding: 5px 0px 40px 0px !important;
  }
}
</style>
